<script setup lang="ts">
import {
  ref,
  computed,
  onMounted,
  onBeforeUnmount,
  onBeforeMount,
  shallowRef,
  watch
} from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import "@wangeditor/editor/dist/css/style.css";
import { message } from "@/utils/message";
import { getKeyList } from "@pureadmin/utils";
import { usePublicHooks } from "@/views/common/hooks";
const { switchStyle } = usePublicHooks();
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import Delete from "@iconify-icons/ri/delete-bin-7-line";
import { uploadImageConfig } from "@/views/common/upload_background";
import { UploadFilled, Download } from "@element-plus/icons-vue";
import { downloadByUrl } from "@pureadmin/utils";

const { uploadFileUrl, headers } = uploadImageConfig();

const props = withDefaults(defineProps<FormProps>(), {
  id: String,
  formInline: () => ({
    id: "",
    file: null
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

// 文件类型限制
const fileTypes = [
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // xlsx
  "application/vnd.ms-excel" // xls
];

const handleExceed = () => {
  message("只能上传一个文件!", { type: "warning" });
};

const handleChange = (file, fileList) => {
  // 如果已有文件，删除之前的
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }

  // 检查文件类型
  if (!fileTypes.includes(file.raw.type)) {
    message("只能上传 Excel 文件!", { type: "error" });
    return false;
  }
  newFormInline.value.file = file.raw;
};

const handleRemove = () => {
  newFormInline.value.file = null;
};

const submitForm = () => {
  const formData = new FormData();
  formData.append("file", newFormInline.value.file);
  formData.append("otherField", newFormInline.value.otherField);
  handleImportSubmit(formData);
};

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
    class="import-form"
  >
    <el-form-item label="导入文件" prop="file">
      <el-upload
        class="upload-demo"
        :action="uploadFileUrl"
        :headers="headers"
        :auto-upload="false"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :limit="1"
        accept=".xlsx,.xls"
      >
        <template #trigger>
          <el-button type="primary">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <span class="ml-1">选择文件</span>
          </el-button>
        </template>

        <template #tip>
          <div class="el-upload__tip text-gray-400">
            只能上传一个 Excel 文件 (*.xlsx, *.xls)
          </div>
        </template>
      </el-upload>
    </el-form-item>

    <el-divider content-position="center">模板下载</el-divider>

    <div class="template-download">
      <el-button
        type="primary"
        link
        @click="
          downloadByUrl(
            'https://group.zhoong.cn/static/导入模板.xlsx',
            '导入模板.xlsx'
          )
        "
      >
        <el-icon><download /></el-icon>
        <span class="ml-1">下载导入模板</span>
      </el-button>
      <div class="text-gray-400 mt-2 text-sm">
        请先下载模板,按照模板格式填写后再上传
      </div>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.import-form {
  padding: 20px;

  :deep(.el-upload-list) {
    margin-top: 10px;
  }

  :deep(.el-upload-dragger) {
    width: auto;
  }

  .template-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  .el-divider {
    margin: 24px 0;
  }
}

// 上传区域样式美化
:deep(.upload-demo) {
  .el-upload {
    width: 100%;

    .el-button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
